<template>
  <zero-vxe-grid v-loading="loading">
    <div slot="header">
      <!--    查询条件-->
      <el-collapse-transition>
        <div v-show="viewModuleOptions.showSearch">
          <vxe-form ref="queryForm" :data="viewModuleOptions.searchForm" title-align="right">
            <vxe-form-item title="文件名" field="fileName" :item-render="{}">
              <template #default="{ data }">
                <vxe-input max-length="50" v-model="data.fileName" showWordCount clearable placeholder="请输入文件名"/>
              </template>
            </vxe-form-item>

            <vxe-form-item title="文件KEY" field="fileKey" :item-render="{}">
              <template #default="{ data }">
                <vxe-input max-length="50" v-model="data.fileKey" showWordCount clearable placeholder="请输入文件KEY"/>
              </template>
            </vxe-form-item>

            <vxe-form-item title="文件类型" field="storageBucket" :item-render="{}">
              <template #default="{ data }">
                <vxe-select v-model="data.storageBucket" placeholder="请选择文件类型" clearable>
                  <vxe-option v-for="dict in dict.type.bucket" :key="dict.value" :label="dict.label"
                              :value="dict.value"></vxe-option>
                </vxe-select>
              </template>
            </vxe-form-item>
            <vxe-form-item title="创建时间" field="createTime" :item-render="{}">
              <template #default="{ data }">
                <el-date-picker v-model="data.createTime" style="width: 240px" value-format="yyyy-MM-dd"
                                type="daterange" range-separator="-" start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="viewModuleOptions.pickerOptions" :editable="false"/>
              </template>
            </vxe-form-item>
            <vxe-form-item>
              <vxe-button content="搜索" round @click="searchSubmit" status="primary"/>
              <vxe-button content="重置" round @click="searchResetForm"/>
            </vxe-form-item>
          </vxe-form>
        </div>
      </el-collapse-transition>
    </div>
    <div slot="main">
      <!--表格-->
      <vxe-grid v-bind="viewModuleOptions" :ref="viewModuleOptions.ref" v-on="viewModuleOptions.fns">
        <template #buttons>
          <vxe-button content="文件上传" status="primary"
                      @click="initDialog({ref:minioPlusRef,title:'文件上传'})"
                      v-hasPermi="['fileMetadataInfo:uploadSharding']"/>
          <vxe-button content="批量删除" status="danger" icon="vxe-icon-delete" @click="handleDelete"
                      v-hasPermi="['fileMetadataInfo:delete']"
                      :disabled="viewModuleOptions.dataListSelections.length <= 0"/>
        </template>

        <template #tools>
          <vxe-button :title="viewModuleOptions.showSearch ? '隐藏搜索' : '显示搜索'" @click="showOrHideClick"
                      icon="vxe-icon-search" circle/>
          <vxe-button :title="viewModuleOptions.isFullscreen ? '还原' : '全屏'" @click="toggleIsFullscreen"
                      class="tool-btn"
                      :icon="viewModuleOptions.isFullscreen ? 'vxe-icon-minimize' : 'vxe-icon-fullscreen'" circle/>
        </template>

        <template #operation="{ row }">
          <vxe-button mode="text" status="danger" content="删除" v-hasPermi="['fileMetadataInfo:delete']"
                      @click="handleDelete(row)"></vxe-button>
          <vxe-button mode="text" status="primary" content="详情"
                      @click="initDialog({ref:dialogRef,row:row})"></vxe-button>
          <vxe-button mode="text" status="warning" content="下载" v-hasPermi="['fileMetadataInfo:downloadFile']"
                      @click="downloadFile(row)"></vxe-button>
        </template>

        <template #fileLocation="{ row }">
          /{{ row.storageBucket }}/{{ row.storagePath }}/{{ row.fileMd5 }}
        </template>
        <template #fileShow="{ row }">
          <dict-tag :options="dict.type.bucket" :value="row.storageBucket"/>
          <!--          <img :title="getImgTitle(row,dict.type.bucket)"-->
          <!--               style="width: 100px; height: 100px"-->
          <!--               :src="getImg(row,dict.type.bucket)"/>-->
        </template>
        <template #fileSize="{ row }">
          {{ formatFileSize(row.fileSize) }}
        </template>
      </vxe-grid>

      <!-- 详细 -->
      <minioDetails :ref="dialogRef"
                    :dictType="dict.type"/>
      <!-- 导入弹框 -->
      <minioPlus :ref="minioPlusRef"
                 :getDataList="getDataList"/>
    </div>
  </zero-vxe-grid>
</template>

<script>

import viewModule from '@/mixins/vxe-grid.js'; // 公共js
import {checkPermi} from "@/utils/permission.js";
import minioDetails from "./components/minio-details.vue";
import minioPlus from "./components/minio-plus.vue";
import addUpdate from "@/views/system/dict/components/AddUpdate.vue";

export default {
  name: "minio",
  dicts: ['judge', 'bucket', 'whether'],
  mixins: [viewModule],
  components: {addUpdate, minioDetails, minioPlus},
  data() {
    return {
      minioPlusRef: 'minioPlusRef',
      dialogRef: 'dialogRef',
      viewModuleOptions: {
        delKey: 'fileKey',
        axios: this.$axiosFile,
        dataUrl: '/fileMetadataInfo/pageList',
        removeUrl: '/fileMetadataInfo',
        columns: [
          {type: 'checkbox', width: 60},
          {field: 'fileKey', title: '文件KEY', showOverflow: true, resizable: true},
          {
            title: '文件位置',
            showOverflow: true,
            resizable: true,
            slots: {default: 'fileLocation'}
          },
          {field: 'fileName', title: '原文件名', resizable: true},
          {title: '文件类型', slots: {default: 'fileShow'}},
          {title: '文件大小', resizable: true, slots: {default: 'fileSize'}},
          {field: 'createTime', title: '创建时间', sortable: true, width: '150px'},
          {field: 'updateTime', title: '修改时间', width: '150px'},
          {
            title: '操作', width: 150, slots: {default: 'operation'},
            visible: checkPermi(['fileMetadataInfo:delete'])
          }
        ]
      }
    };
  },
  watch: {
    //时间筛选特殊处理，重置createTime时也将根据这个字段衍生出来的字段置为null
    'viewModuleOptions.searchForm.createTime': function (val) {
      this.viewModuleOptions.searchForm.startCreateTime = val ? val[0] : null
      this.viewModuleOptions.searchForm.endCreateTime = val ? val[1] : null
    }
  },
  methods: {

    // 计算文件大小函数
    formatFileSize(size) {
      if (size < 1024 * 1024) {
        const temp = size / 1024;
        return temp.toFixed(2) + "KB";
      } else if (size < 1024 * 1024 * 1024) {
        const temp = size / (1024 * 1024);
        return temp.toFixed(2) + "MB";
      } else {
        const temp = size / (1024 * 1024 * 1024);
        return temp.toFixed(2) + "GB";
      }
    },
    //下载
    downloadFile(row) {
      this.loading = true
      this.$axiosFile({
        url: '/storage/download/' + row.fileKey,
        method: 'get',
      }).then(res => {
        window.location.href = res.data
        this.loading = false
      })
    },
  }
}
</script>
